<template>
    <div>
        <NavBar><template v-slot:default>订单结算</template></NavBar>
        <div style="margin-top: 45px;width: 100%">
            <div class="info">
                <div class="info-top"><span>{{address.name}}</span><span>{{address.phone}}</span>
                    <div class="moreaddress"><van-icon name="arrow" size="20px" @click="GotoAddress" /></div>
                </div>
                <div class="address">
                    <span>{{address.province}}-{{address.city}}-{{address.county}}-{{address.address}}</span>

                </div>
            </div>
            <div style="margin-top:20px;display: flex"
                 v-for="(item,index) in cartList" :key="index"
            >
                <div style="flex: 1"><img v-lazy="item.goods.cover_url"  alt=""></div>
                <div class="infos">
                    <div><span>{{item.goods.title}}</span><span style="float: right">x{{item.num}}</span></div>
                    <div style="color: crimson; padding-left: 5px"><small>￥</small>{{item.goods.price}}.00</div>
                </div>
            </div>
            <van-popup v-model:show="showPay" position="bottom"
                       :style="{ height: '40%' }" closeable @click-close-icon ="close"
            >
                <van-grid :border="false" :column-num="2">

                    <van-grid-item>
                        支付宝二维码 <br>
                        <van-image :src="aliyun" height="100" width="100" />
                    </van-grid-item>
                    <van-grid-item>
                        微信二维码 <br>
                        <van-image :src="aliyun" height="100" width="100" />
                    </van-grid-item>
                </van-grid>
            </van-popup>
        </div>
        <div class="bottom">
            <div class="b-left">商品金额</div>
            <div class="b-center"><small style="color: black">合计: </small>{{total}} <small>.00</small>  </div>
            <div class="b-right"><van-button type="danger" size="large" @click="handleCreateOrder">结算</van-button></div>
        </div>
    </div>
</template>

<script>
    import {useRoute,useRouter} from  'vue-router'
    import {useStore} from 'vuex'
    import {reactive,toRefs,onMounted,computed} from 'vue'
    import { Toast } from 'vant';
    import NavBar from '../../components/common/navbar/NavBar'
    import {getOrderPreview, createrOrder, payOrder, payOrderStatus} from "../../network/order";
    export default {
        name: "Createorder",
        components:{
            NavBar
        },
        data() {
            return {
            };
        },
        setup(){
            const store = useStore();
            const router = useRouter();
            const route = useRoute();
            const state = reactive({
                cartList:[],
                address:{},
                showPay:false,
                orderNo:'',
                aliyun:'',
                wechat:''
          });
          const init=()=>{
              Toast.loading({message:'加载中....',forbidClick:true});
              getOrderPreview().then(res=>{
                  let address =res.address.filter(n=>n.is_default=='1');
                  if (address.length==0){
                      state.address={
                          address:'还没有设置默认地址，请选择或者填写地址信息'
                      }
                  }else {
                      state.address=address[0];
                  }
                  state.cartList=res.carts;
                  Toast.clear();
              })
          }
          onMounted(()=>{
              init()
            })
            const GotoAddress =()=>{
              router.push({path:'/address'})
            }
            const total = computed(()=>{
                let sum =0 ;
                state.cartList.forEach(item=>{
                    sum+=parseInt(item.num)*parseFloat(item.goods.price)
                    console.log(state.address.id);

                })
                return sum
            })
            const handleCreateOrder =()=>{
              //传递一个参数
              const params = {
                  address_id:state.address.id
              }
              if(state.cartList.length<1){
                  Toast('订单为空')
              }else{
                  createrOrder(params).then(res=>{
                      Toast('创建成功！');
                      store.dispatch('updateCart');
                      state.showPay=true;
                      state.orderNo=res.id;//订单id
                      payOrder(state.orderNo,{type:'aliyun'}).then(res=>{
                          //获取二维码信息
                          state.aliyun=res.qr_code_url;
                          state.wechat=res.qr_code_url;
                      })
                      const timer =setInterval(()=>{
                          payOrderStatus(state.orderNo).then(res=>{
                              if(res=='2') {
                                  clearInterval(timer);
                                  console.log('支付成功');
                                  router.push({path: '/orderDetail', query:{id:state.orderNo}})
                              }
                          })
                      },2000)
                  })
              }


            }
            const close=()=>{
                router.push({path:'/orderDetail',query:{id:state.orderNo}})
            }


            return{
              close,
              handleCreateOrder,
              total,
              GotoAddress,
              ...toRefs(state),
                init,
            }
        },
    }
</script>

<style scoped lang="scss">
.bottom{
    background: white;
    font-size: 18px;
    position: fixed;
    bottom: 50px;
    line-height: 3;
    width: 100%;
    display: flex;
    .b-left{
        flex:1;
    }
    .b-center{
        flex: 2;
        color: red;
    }
    .b-right{
        flex: 1;
        line-height: 1;
    }
}
    .info{

        width: 100%;
        padding-top: 5px;
        padding-left: 20px;
        padding-right: 10px;
        margin-bottom: 30px;
        text-align: left;
        height: 60px;
        div{
            margin: 10px;
        }

    }
    .address{
        width: 100%;
    }
    .moreaddress{
        float: right;
        width: 5%;
    }
    .info-top{
        width: 100%;
    }
    .infos{

        flex: 3;
        text-align: left;
        div{
            margin: 20px;
        }
    }
img{
    height: auto;
    width: 100px;
}

</style>